<template>
  <div class="sidebar-box">
    <ul>
      <li v-for="data in columnList" @click="hidenMenu(data)">
        <a v-link="{path:'/articleList?id='+data._id}" :class="{'cur':data._id == $route.query.id}" v-text="data.name"></a>
      </li>
    </ul>
  </div>
</template>
<script>
  export default{
    data(){
      return {
        columnList:[]
      }
    },
    props:["showMenu","title"],
    ready(){
      var self = this;
      this.$http.get("/columnList" , function(res){
        self.columnList = res.data;
      },"JSON");
    },
    methods:{
      //关闭菜单
      hidenMenu(data){
        this.showMenu = false;
        this.title = data.name;
      }
    }
  }
</script>
<style scoped>
  .sidebar-box{
    width:6rem;
    -webkit-transform:translate3d(-1.5rem , 0 , 0);
    transform:translate3d(-1.5rem , 0 , 0);
    height:100%;
    background:#3d434f;
    position:absolute;
    top:0;
    left:0;
  }
  .sidebar-box ul{
    padding:0 10px;
  }
  .sidebar-box li{
    padding:0.2rem 0;
    color:#393D49;
    font-size:0.28rem;
    border-bottom:1px solid #f0f0f0;
    text-indent:20px;
  }
  .sidebar-box li a{
    color:#fff;
  }
  .sidebar-box ul .cur{
    color:#55bef9;
  }
  .showMenu .sidebar-box{
    -webkit-transform:translate3d(0 , 0 , 0);
    -ms-transform:translate3d(0 , 0 , 0);
    -moz-transform:translate3d(0 , 0 , 0);
    transform:translate3d(0 , 0 , 0);
  }
  .sidebar-box:after{
      content:"";
      display:block;
      width:20px;
      height:100%;
      position:absolute;
      right:-20px;
      top:0;
      z-index: 99;
  }
  .showMenu .sidebar-box:after{
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  }
</style>
